<template>
  <div class="popover-container">
    <div class="trigger-area">
      <label style="with:100px;">{{ titleString }}：</label>
      <el-select
        v-model="keyword"
        :multiple="multiple"
        :collapse-tags="collapse"
        filterable
        style="margin-left: 20px;"
        placeholder="请选择"
        @change="selectChange"
        @focus="handlerSearch"
        @remove-tag="handleClose"
      >
        <el-option v-for="item in resultList" :key="item.lineId" :label="item.lineName" :value="item.lineId" />
      </el-select>
    </div>
    <div class="twoBtn">
      <button class="submitBtn1 btnStyle" @click="save">保存</button>
      <button class="submitBtn1 btnStyle" @click="handleCloseDialog">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Optionadd',
  props: {
    titleString: {
      type: String,
      default() {
        return '饰品名称'
      }
    },
    resultList: {
      type: Array,
      default() {
        return []
      }
    },
    multiple: {
      type: Boolean,
      default() {
        return false
      }
    },
    collapse: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data: function() {
    return {
      checkedList: [], // 选中的数据
      keyword: ''// 文本框的值
    }
  },
  mounted: function() {
    this.keyword = ''
  },
  methods: {
    selectChange(value) {
      this.$log(value)
      this.checkedList = value
    },
    handlerSearch() {
      this.$emit('requestReslutList', '')
    },
    handleClose(tagItem) {
      // this.$log(tagItem)
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog', false)
    },
    save() {
      this.$emit('saveData', this.checkedList)
    }
  }
}
</script>

<style lang="scss" scoped>
$menuText: #14162e; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.popover-container {
  display: flex;
  flex-direction: row;
  justify-content: center;

  .twoBtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    position: absolute;
    bottom: 30px;

    .btnStyle {
      width: 148px;
      height: 44px;
      background: #e7ecf8;
      border: 1px solid #3b425d;
      border-radius: 8px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #3b425d;
    }

    .btnStyle:hover {
      background: $mainColor;
      color: #fff;
    }

    .submitBtn1 {
      display: inline-block;
      cursor: pointer;
    }

    .submitBtn1:nth-of-type(2) {
      margin-left: 64px;
    }
  }
}

::v-deep .el-input__inner {
  &:focus {
    border-color: $mainColor;
  }

  width: 400px;
}

.trigger-area {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 550px;
  margin-bottom: 150px;
}
</style>

